import React from 'react'
import { View, Text } from '@tarojs/components'
import Taro from '@tarojs/taro'
import TabBarIcon from './TabBarIcon'
import { useScreenWidthSimple } from '../hooks/useScreenWidth'
import { defaultTabBarConfig, mobileTabBarConfig } from '../config/tabBarConfig'
import './CustomTabBar.scss'

interface TabItem {
  pagePath: string
  text: string
  type: 'home' | 'category' | 'pay' | 'message' | 'map' | 'assistant'
}

const CustomTabBar: React.FC = () => {
  const screenWidth = useScreenWidthSimple()
  const { minWidthForDisplay } = defaultTabBarConfig
  
  // 根据屏幕宽度决定是否显示TabBar
  if (screenWidth >= minWidthForDisplay) {
    return null
  }

  const tabs = mobileTabBarConfig.tabs

  const currentPath = Taro.getCurrentInstance().router?.path || 'pages/index/index'

  const handleTabClick = (tab: TabItem) => {
    if (currentPath !== tab.pagePath) {
      Taro.switchTab({
        url: `/${tab.pagePath}`
      })
    }
  }

  return (
    <View className='custom-tab-bar'>
      {tabs.map((tab, index) => {
        const isActive = currentPath === tab.pagePath
        return (
          <View 
            key={index} 
            className={`tab-item ${isActive ? 'active' : ''}`}
            onClick={() => handleTabClick(tab)}
          >
            <TabBarIcon 
              type={tab.type} 
              active={isActive} 
              size={24} 
            />
            <Text className='tab-text'>{tab.text}</Text>
          </View>
        )
      })}
    </View>
  )
}

export default CustomTabBar
